Passkey Mobile App Shell for Giano #68
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Created environment configuration files for development, production, and staging. - Added .gitignore to exclude unnecessary files and directories. - Set up ESLint and Prettier configurations for code quality. - Implemented basic app structure with main App component and Browser component. - Included necessary scripts for building and testing the application. - Established GitHub workflows for CI/CD, including linting, testing, and EAS builds. - Added prompts for common tasks and validation scripts for i18next syntax. - Included assets such as icons and splash screens.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
- Introduced headers in next.config.js to serve the Apple App Site Association file. - Added apple-app-site-association file for web credentials configuration. - Created assetlinks.json for Android app linking and permissions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 Passkey Mobile App Shell for Giano
Hey team! I've implemented a solution to address the passkey gap in mobile environments, particularly for Giano.
The Problem:
A common pattern we use in some projects is creating a mobile app as a shell to run web apps. However, this approach lacks proper passkey examples, especially for Giano, because mobile apps using WebView components use a UI Controller that doesn't support passkey. While in-app browsers with session attributes enabled can support passkey, this functionality isn't available in WebView UI View Controllers.
The Solution:
I created a React Native mobile app shell that bridges the gap between web passkey implementations and native mobile capabilities. Here's what it does:
✅ Native Passkey Support: The app uses react-native-passkeys to handle iOS passkey creation and authentication natively
✅ Web App Integration: Runs web apps in a WebView with a custom bridge that intercepts passkey requests
✅ Seamless Bridge: When the web app calls navigator.credentials.get() or navigator.credentials.create(), the requests are automatically routed to the native passkey implementation
✅ Cross-Platform Ready: Built with Expo for easy deployment to both iOS and Android
Key Components:
Browser component with WebView integration
Custom bridge script that intercepts credential requests
Native passkey handling through React Native Passkeys
Message passing between web app and native layer
Tech Stack:
React Native + Expo
react-native-passkeys for native passkey support
react-native-webview for web app hosting
TypeScript for type safety
This approach allows us to run any web-based passkey example (like our custom Giano examples) as a mobile app while maintaining full passkey functionality that users expect on mobile devices.
The implementation follows our established patterns and is ready for testing and integration! 🚀